<template>
	<view class="order-contanier" v-if="isLoading">
		<!-- tab栏 -->
		<view class="order-tabs">
			<u-tabs :list="tabs" :scrollable="false" :current="curTabIndex" lineColor="#01ab36" @click="onChangeTab">
			</u-tabs>
		</view>
		<view class="order-list" v-if="list.length">
			<view class="item-order-content" v-for="(v,i) in list" :key="i">
				<view class="head flex-sb">
					<view class="text-number">订单编号<text class="number">{{v.orderNo}}</text></view>
					<view class="state">{{orderState(v)}}</view>
				</view>
				<view class="list-content" @click="getOrderDetail(v.orderId)">
					<unt-goods-detail :data="v.orderGoodsList" modal="order"></unt-goods-detail>
					<view class="order-discount-total flex-end">
						<view class="discount">共优惠: <text class="discount-price">{{v.couponMoney.toFixed(2)}}</text>
						</view> 
						<view class="total-amount flex"><text>总金额: </text>
							<view class="price">¥<text class="price-num">{{v.totalPrice.toFixed(2)}}</text></view>
						</view>
					</view>
				</view>
				<view class="btn-list flex-end">
					<template v-if="orderState(v)=='待支付'">
						<view class="btn cancel" @click="cancelOrder(v.orderId)">取消订单</view>
						<view class="btn payment" @click="toPayOrder(v.orderId)">去支付</view>
					</template>
					<template v-else-if="orderState(v)=='待发货'">
						<view class="btn aftersales" @click="afterSales(v.orderId)">申请售后</view>
					</template>
					<template v-else-if="orderState(v)=='已发货'"> 
						<view class="btn logistics" v-show="v.deliveryType==10" @click="logiSticsTop(v.orderId)">查看物流</view>
						<view class="btn aftersales" @click="afterSales(v.orderId)">申请售后</view>
						<view class="btn takegoods" @click="takeOrder(v.orderId)">确认收货</view>
					</template>
					<template v-else-if="orderState(v)=='已取消'||orderState(v)=='已退款'">
						<view class="btn delete" @click="deleteOrder(v.orderId)">删除订单</view>
					</template>
					<template v-else-if="orderState(v)=='已完成'">
						<view class="btn logistics" v-show="v.deliveryType==10" @click="logiSticsTop(v.orderId)">查看物流</view>
						<view class="btn delete" @click="deleteOrder(v.orderId)">删除订单</view>
						<view class="btn aftersales" @click="afterSales(v.orderId)">申请售后</view>
					</template>
				</view>
			</view>
		</view>
		<!-- 空列表 -->
		<view class="empty-order" v-else>
			<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
			</u-empty>
		</view>
		<!--  -->
	</view>
</template>

<script>
	// 引入插件
	import * as Order from "@/api/order/index.js"
	// tab栏数据
	const tabs = [{
		name: `全部`,
		value: 'all'
	}, {
		name: `待支付`,
		value: 'payment'
	}, {
		name: `待发货`,
		value: 'delivery'
	}, {
		name: `待收货`,
		value: 'received'
	}];
	// const Plugins = requirePlugin("logisticsPlugin");
	export default {
		data() {
			return {
				isLoading: false,
				// 当前页面参数
				options: {
					dataType: 'all'
				},
				// tab栏数据
				tabs,
				// 当前标签索引
				curTabIndex: 0,
				list: [],
				isLoadMore:false,
				page:{
					pageNo:1,
					pageSize:10,
					max:2
				}
			}
		},
		onLoad(options) {
			// 初始化当前选中的标签
			this.initCurTab(options);
			this.getPageData();
			this.isLoading=true;
		},
		methods: {
			afterSales(id){
				this.$unts.navTo("pages_order/afterSales/afterSales", {
					orderId: id
				})
			},
			takeOrder(id){
				Order.takeDelivery({
					orderId: id,
					status:20
				}).then(res => {
					this.$unts.success(res.message, this.handleSearchR());
				})
			},
			logiSticsTop(id) {
				this.$unts.navTo("pages_order/orderExpress/orderExpress", {
					orderId: id
				})
			},
			deleteOrder(id) {
				Order.deleteOrder({
					orderId: id
				}).then(res => {
					this.$unts.error(res.message, this.handleSearchR());
				})
			},
			getOrderDetail(id) {
				this.$unts.navTo("pages_order/order/detail/detail", {
					orderId: id
				})
			},
			async getPageData() {
				const app=this;
				const params={
						status:app.curTabIndex,
						pageNum:app.page.pageNo,
						pageSize:app.page.pageSize
				}
				const resp= await Order.list(params);
				app.list=[...app.list,...resp.data.list];
				app.page.max=resp.data.totalPage;
				app.isLoadMore = false;
			},
			// 初始化当前选中的标签
			initCurTab(options) {
				if (options.dataType) {
					const index = this.tabs.findIndex(item => item.value == options.dataType)
					this.curTabIndex = index > -1 ? index : 0
				}
			},
			cancelOrder(id) {
				const app = this;
				uni.showModal({
					title: '友情提示',
					content: '确认要取消该订单吗？',
					success(o) {
						if (o.confirm) {
							Order.cancel({
								orderId: id
							}).then(res => {
								// 显示成功信息
								if(res.data!=="关闭失败"){
									app.$unts.toast(res.message);
									// 刷新订单列表
									app.handleSearchR();
								}else{
									app.$unts.toast('取消失败！');
								}
							}).catch(err => err)
						}
					}
				});

			},
			toPayOrder(id) {
				this.$unts.navTo('pages_order/order/payment/payment', {
					orderId: id
				})
			},
			handleSearchR(){
				this.list=[];
				this.page={
					pageNo:1,
					pageSize:10,
					max:2
				};
				this.getPageData();
			},
			onChangeTab(e) {
				// 设置当前选中的标签
				this.curTabIndex = e.index;
				this.handleSearchR();
			}
		},
		computed: {
			orderState() {
				return function(v) {
					if (v.orderStatus == 10 && v.deliveryStatus == 10&&v.payStatus != 10) {
						return '待发货';
					} else if (v.orderStatus == 10 && v.payStatus == 10 ) {
						return "待支付";
					}else if (v.orderStatus == 10 && v.deliveryStatus == 20 && v.refundStatus!="SUCCESS") {
						return "已发货";
					} else if(v.orderStatus == 30 && v.refundStatus=="SUCCESS"){
						return "已退款";
					} else if (v.orderStatus == 20) {
						return "已取消";
					} else if (v.orderStatus == 30) {
						return "已完成";
					}
				}
			}
		},
		//上拉触底函数
		onReachBottom(){
			const app=this;
		    if(!app.isLoadMore&&app.page.pageNo<app.page.max){
		        app.isLoadMore=true
		        app.page.pageNo+=1;
		        app.getPageData();
		    }
		}
	}
</script>
<style>
	page {
		background-color: #F6F8FA;
	}
</style>
<style lang="scss" scoped>
	.order-contanier {
		position: relative;
		width: 100%;
		// height: 100vh;
		// overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;

		.order-tabs {
			position: sticky;
			top: 0px;
			width: 100%;
			padding-bottom: 20rpx;
			background: #fff;
		}

		.order-list {
			width: 100%;
			padding: 20rpx 30rpx;
			// height: 100vh;
			// overflow-y: auto;

			.item-order-content {
				margin-top: 30rpx;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 20rpx;

				.head {
					padding-bottom: 20rpx;
					border-bottom: 1px solid #f0f0f4;

					.text-number {
						font-size: 24rpx;

						.number {
							margin-left: 20rpx;
						}
					}

					.state {
						font-size: 28rpx;
						color: #f36838;
					}
				}

				.list-content {
					margin: 25rpx 0px;

					.item {
						align-items: flex-start;

						.item-image {
							margin: 0rpx 10rpx;
							width: 200rpx;
							height: 200rpx;
							flex-shrink: 0;

							.image {
								width: 100%;
								height: 100%;
							}
						}

						.item-title-price-specs {
							.title-price {
								align-items: flex-start;
								font-size: 28rpx;

								.price {
									padding: 0px 15rpx;

									.price-num {
										font-size: 32rpx;
										font-weight: bold;
									}
								}
							}

							.specs {
								font-size: 24rpx;
								color: #999;
								margin-top: 15rpx;
							}
						}
					}

					.order-discount-total {
						.discount {
							font-size: 22rpx;
							color: #999;

							.discount-price {
								margin-left: 20rpx;
							}
						}

						.total-amount {
							margin-left: 30rpx;
							font-size: 28rpx;

							.price {
								margin-left: 20rpx;

								.price-num {
									font-size: 36rpx;
									font-weight: bold;
								}
							}
						}
					}
				}

				.btn-list {
					.btn {
						border-radius: 150rpx;
						padding: 10rpx 30rpx;
						font-size: 28rpx;
						margin-left: 15rpx;
					}

					.cancel,
					.delete,
					.logistics,.aftersales{
						border: 1px solid #e9e7ef;
					}

					.payment,
					.takegoods {
						background: linear-gradient(to right, #F9271E, #FE5E33);
						color: #fff;
						margin-left: 20rpx;
					}
					.aftersales{
						margin-left: 15rpx;
					}
				}

			}
		}

		// 
	}
</style>